<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <div class="top"></div>
    <div class="container">
        <div class="main" style="width: 1090px;">
            <div class="cartTop">
                <img src="./images/logo.png" width="200px" alt="">
            </div>
            <div class="cartProBox">
                <h3 class="flex-c-between ">
                    <div class="left">
                        <span>我的购物车<span class="cartTotleNum">2</span></span>
                    </div>

                    <div class="rightTitleTop right">
                        <img src="./images/icon_1.png" width="12px" height="12px">
                        <span>考拉自营商品已免运费</span>
                        <a href="#">再逛逛~</a>
                        <span>配送至</span>
                        <select name="" id="" class="kf-address__input">
                            <option value="">上海/徐汇区/天平路街道</option>
                        </select>
                    </div>
                </h3>
                <div class="cartHead flex-c-between">
                    <div class="cartProSelf" style="width: 134px;">
                        <input type="checkbox" class="selectCartAll u-chk" id="selectCartAll">
                        <label for="selectCartAll" style="font-size: 12px;font-weight: normal;">全选</label>
                    </div>
                    <div class="cartSelectTitleInfo" style="width: 422px;">商品信息</div>
                    <div class="cartSelectTitlePrice" style="width: 150px;">单价(元)</div>
                    <div class="cartSelectTitleNum" style="width: 147px;">数量</div>
                    <div class="cartSelectTitlePay" style="width: 128px;">金额(元)</div>
                    <div class="cartSelectTitleOpeate" style="width: 107px;">操作</div>
                </div>



                <div id="cart">
                    <div class="cartProItem">
                        <div class="cartProSelf">
                            <input type="checkbox" class="selectCart u-chk">
                            <span><span class="ziying">自营</span>考拉日本直购自营店</span>
                        </div>
                        <div class="cartPro">
                            <div class="cartProSelf">
                                <input type="checkbox" class="selectCartSelf u-chk">
                            </div>

                            <img src="./images/goods01.jpg" alt="">

                            <div style="display: flex;height: 100%;">
                                <div class="cartProInfo txtwrap">
                                    <p>【日本直购】ASUSTek笔记本电脑核心i3-10110U X545FA-BQ138T / A</p>
                                    <p style="margin-top: 5px;"><span class="m-actlabel"
                                            style=" margin-top: 5px !important;">特价</span></p>
                                </div>


                                <div class="skudesc">
                                    <p>颜色：Not Specified</p>
                                    <p>套餐：29*6*46cm</p>
                                </div>
                            </div>

                            <div class="newprice">
                                <span>10000</span>
                                <a href="">已降1元</a>
                            </div>

                            <div class="cartNumBox" style="margin-left: 54px;">
                                <div class="flex-c-between">
                                    <button class="cartNumAdd">-</button>
                                    <input type="number" class="cartNum" value="1" max="3" min="1">
                                    <button class="cartNumMinus">+</button>
                                </div>
                                <p>每日限购<span>3</span>件</p>
                            </div>

                            <div class="newprice" style=" margin-left: 65px;">
                                <span>10000</span>
                            </div>

                            <!-- <div class="cartCalculation">
                            活动优惠：-￥
                            <span class="cartSaleSelf">0</span> 商品应付总计：￥
                            <span class="cartPaySelf">18677</span> 预估税费：￥
                            <span class="cartTaxSelf">0</span>
                          </div> -->



                            <div class="newprice2">
                                <span class="u-opt">删除</span>
                                <span class="u-opt">移出我的收藏</span>
                            </div>
                        </div>
                    </div>

                    <div class="cartProItem">
                        <div class="cartProSelf">
                            <input type="checkbox" class="selectCart u-chk">
                            <span><span class="ziying">自营</span>考拉日本直购自营店</span>
                        </div>
                        <div class="cartPro">
                            <div class="cartProSelf">
                                <input type="checkbox" class="selectCartSelf u-chk">
                            </div>

                            <img src="./images/goods01.jpg" alt="">

                            <div style="display: flex;height: 100%;">
                                <div class="cartProInfo txtwrap">
                                    <p>【日本直购】ASUSTek笔记本电脑核心i3-10110U X545FA-BQ138T / A</p>
                                    <p style="margin-top: 5px;"><span class="m-actlabel"
                                            style=" margin-top: 5px !important;">特价</span></p>
                                </div>


                                <div class="skudesc">
                                    <p>颜色：Not Specified</p>
                                    <p>套餐：29*6*46cm</p>
                                </div>
                            </div>

                            <div class="newprice ">
                                <span>10000</span>
                                <a href="">已降1元</a>
                            </div>

                            <div class="newprice" style=" margin-left: 54px;">
                                <span>1</span>
                            </div>

                            <div class="newprice" style=" margin-left: 65px;">
                                <span>10000</span>
                            </div>

                            <!-- <div class="cartCalculation">
                            活动优惠：-￥
                            <span class="cartSaleSelf">0</span> 商品应付总计：￥
                            <span class="cartPaySelf">18677</span> 预估税费：￥
                            <span class="cartTaxSelf">0</span>
                          </div> -->



                            <div class="newprice2">
                                <span class="u-opt">删除</span>
                                <span class="u-opt">移出我的收藏</span>
                            </div>
                        </div>

                    </div>
                </div>




                <div class="ttbar">
                    <div class="lt">
                        <input type="checkbox" class="selectCartAll  u-chk ">
                        <label for="selectCartAll" style="font-size: 12px;font-weight: normal;">全选</label>
                        <span class="cartDeleteAll"
                            style="font-size: 12px;font-weight: normal;margin-left: 10px;">删除选中商品</span>
                    </div>
                    <div class="rt">
                          <p>已选商品 <span class="num" id="piece">2</span> 件 <span class="itm">总价(不含运费)：<span class="num" id="totalPrice">24825</span></span></p>
                          <p><span class="itm">商品应付总计: ¥2000</span><span class="itm">商品税费(不含运费税): ¥2000</span></p>
                    </div>
                    <div class="gobuy">
                        结算
                    </div>
                </div>



            </div>
  

          <div class="goodsList">
              <div class="newRecomTitle">
                  <h4>最佳搭配<span>根据你的购物车商品推荐</span></h4>
                  <div class="page">
                      <a class="rec-forward" onclick="count()"><</a>
                        <span class="rec-page"> 
                            <em id="currentPage">1</em>/<em id="total">2</em>
                        </span>
                      <a class="rec-forward" onclick="add()">></a>
                 </div>
              </div>
              <ul id="changGoods">
                  <!-- <li class="newRecomItemWrap">
                      <img src="https://kaola-haitao.oss.kaolacdn.com/1b591b6db110dd1df96080188b6692d6.jpg" alt="" srcset="">
                      <div class="itemTitle">
                          <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                      </div>
                      <div class="priceBox">
                          <p class="price">¥7998</p>
                          <p><a>0人已评价</a></p>
                      </div>
                  </li>

                  <li class="newRecomItemWrap">
                    <img src="https://kaola-pop.oss.kaolacdn.com/ffa7ebf712f44938a32a46737a74ca8c_800_800.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li>

                <li class="newRecomItemWrap">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/7dd46f32f9ff410c0679d52993a447ad.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li>

                <li class="newRecomItemWrap">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/29ceb2c3c9ff0f44beec2116d1415d06.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li>

                <li class="newRecomItemWrap">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/99b3310a15666dd30f4898cb4f18ba04.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li> -->
                 
              </ul>
          </div>

          <div class="goodsList">
            <div class="newRecomTitle">
                <h4>猜你喜欢<span>根据你的浏览记录推荐的商品</span></h4>
        
            </div>
            <ul>
                <li class="newRecomItemWrap">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/14ae074173b951500a9c6b2650b36abc.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li>

                <li class="newRecomItemWrap">
                  <img src="https://kaola-haitao.oss.kaolacdn.com/11dbf9a647c486700965ce0951925569.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-pop.oss.kaolacdn.com/6ad4775c6ae34a70b62ea285fdf3706b_800_800.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-pop.oss.kaolacdn.com/ffa7ebf712f44938a32a46737a74ca8c_800_800.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-pop.oss.kaolacdn.com/25cddfe8-8bc3-4dd3-a9e2-61296457209d" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>
               
            </ul>
        </div>

        <div class="goodsList">
            <div class="newRecomTitle">
                <h4>大家都在买<span>全网最热门的商品推荐</span></h4>
            </div>
            <ul>
                <li class="newRecomItemWrap">
                    <img src="https://kaola-haitao.oss.kaolacdn.com/0cefb86c10f131a9dac13bf08b40063d.jpg" alt="" srcset="">
                    <div class="itemTitle">
                        <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                    </div>
                    <div class="priceBox">
                        <p class="price">¥7998</p>
                        <p><a>0人已评价</a></p>
                    </div>
                </li>

                <li class="newRecomItemWrap">
                  <img src="https://kaola-pop.oss.kaolacdn.com/ffa7ebf712f44938a32a46737a74ca8c_800_800.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-pop.oss.kaolacdn.com/6ad4775c6ae34a70b62ea285fdf3706b_800_800.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-haitao.oss.kaolacdn.com/6873f880362e7edf9628e4b86e818440.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>

              <li class="newRecomItemWrap">
                  <img src="https://kaola-haitao.oss.kaolacdn.com/ddf94aaabc6e26831aa3528ead7bd43f.jpg" alt="" srcset="">
                  <div class="itemTitle">
                      <a href="#" class="protitle">考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正版Windows11</a>
                  </div>
                  <div class="priceBox">
                      <p class="price">¥7998</p>
                      <p><a>0人已评价</a></p>
                  </div>
              </li>
               
            </ul>
        </div>

        </div>
    </div>
    <div class="bottomBox"></div>
<div class="footer"></div>
</body>
<script src="./libs/jquery.js"></script>
<script src="./libs/require.js" data-main="./js/cart"></script>
<script>
    var goodList = [
        {
            title:'考拉工厂店Lenovo 联想小新Pro16 2021 款 I5处理器16+512G正',
            price:'¥7998',
            comment:'166',
            imgUrl:'https://kaola-haitao.oss.kaolacdn.com/1b591b6db110dd1df96080188b6692d6.jpg'
        },
        {
            title:'考拉工厂店洛斐（LOFREE）圆点机械键盘无线蓝牙多功能电脑',
            price:'¥589',
            comment:'15',
            imgUrl:'https://kaola-pop.oss.kaolacdn.com/6ad4775c6ae34a70b62ea285fdf3706b_800_800.jpg'
        },
        {
            title:'考拉工厂店 Lenovo 联想拯救者Y7000 热销英特尔酷睿i7游戏本',
            price:'¥698',
            comment:'1333',
            imgUrl:'https://kaola-pop.oss.kaolacdn.com/ffa7ebf712f44938a32a46737a74ca8c_800_800.jpg'
        },
        {
            title:'2021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼',
            price:'¥7558',
            comment:'100',
            imgUrl:'https://kaola-haitao.oss.kaolacdn.com/ddf94aaabc6e26831aa3528ead7bd43f.jpg'
        },
        {
            title:'洛斐（LOFREE）无线鼠标常规多系统兼容蓝牙多功能电脑笔记',
            price:'¥5998',
            comment:'66',
            imgUrl:'https://kaola-haitao.oss.kaolacdn.com/6873f880362e7edf9628e4b86e818440.jpg'
        },
        {
            title:'1111111111111考拉工厂店 Lenovo 联想拯救者Y7000 热销英特尔酷睿i7游戏本11111111',
            price:'¥698',
            comment:'55',
            imgUrl:'https://kaola-pop.oss.kaolacdn.com/ffa7ebf712f44938a32a46737a74ca8c_800_800.jpg'
        },
        {
            title:'22222222222222222021款iPad 10.2英寸【壳膜套餐】WLAN版平板电脑 评论有礼',
            price:'¥7558',
            comment:'1500',
            imgUrl:'https://kaola-haitao.oss.kaolacdn.com/1b591b6db110dd1df96080188b6692d6.jpg'
        },
        {
            title:'33333333333333洛斐（LOFREE）无线鼠标常规多系统兼容蓝牙多功能电脑笔记',
            price:'¥5998',
            comment:'15555',
            imgUrl:'https://kaola-pop.oss.kaolacdn.com/6ad4775c6ae34a70b62ea285fdf3706b_800_800.jpg'
        }
    ]


    
function changePage(){
    var arrNew=[];
    var goodListCopy =  JSON.parse(JSON.stringify(goodList))
    for(var i=0;i<5;i++)
    {      
        var _num = Math.floor(Math.random()*goodListCopy.length)
        var mm = goodListCopy[_num];
        goodListCopy.splice(_num,1)
        arrNew.push(mm)
    }

    var  str = ''
    arrNew.map(item=>{
          str+=  ` <li class="newRecomItemWrap">
                      <img src=${item.imgUrl} alt="" srcset="">
                      <div class="itemTitle">
                          <a href="#" class="protitle">${item.title}</a>
                      </div>
                      <div class="priceBox">
                          <p class="price">${item.price}</p>
                          <p><a>${item.comment}人已评价</a></p>
                      </div>
                  </li>`
    })

  
    $("#changGoods").append(str);
}

changePage()


var currentPage = 1 ,total = 2
$('#currentPage').text(currentPage)
$('#total').text(total)


 function count(){
   if(currentPage>1){
       currentPage = 1
       $("#changGoods").empty()
       changePage()
       $('#currentPage').text(currentPage)
   }
 }

function add(){
    if(currentPage<2){
       currentPage = 2
       $("#changGoods").empty()
       changePage()
       $('#currentPage').text(currentPage)
   }
}

</script>
</html>